<template>
	<view class="orders">
		<u-sticky>
		<uni-nav-bar :fixed="true" shadow left-icon="left" title="订单管理"  status-bar @clickLeft="back" :border="false"/>
		
		<u-subsection :list="list" :current="curNow" @change="sectionChange" :fontSize="25"></u-subsection>
		</u-sticky>
		<u-empty
				mode="order"
				icon="http://cdn.uviewui.com/uview/empty/order.png"
				width="320"
				height="320"
				textSize="28"
				:show="orders.length == 0 ? true : false"
		>
		</u-empty>
		<scroll-view scroll-y="true" class="ordersList" v-if="orders.length == 0 ? false : true">
			<view v-for="(item,index) in orders" :key="index" class="order" style="height: 410rpx; ">
				<view class="order" @click="gotoOrderInfo(item)">
					<view class="top">
						<text style="color: #333;">{{item.orderTime}}</text>
						<text style="color: #3CB7FF;">{{item.status | formatStatus}}</text>
					</view>
					<view class="mid">
						<scroll-view scroll-x="true" class="products">
							<view v-for="(item2,index) in item.orderDetailList" :key="index" class="product">
								<img :src="item2.image" alt="" style="width: 150rpx;height: 150rpx; border-radius: 15rpx;"/>
								<view style=" text-align:center">{{item2.name}}</view>
							</view>
						</scroll-view>
						<view class="price" >
							<view style="color: #000; font-weight: 600;">￥{{item.amount}}</view>
							<view style="font-size: 22rpx; margin-top: 6rpx;">共{{item.orderDetailList.length}}件</view>
						</view>
					</view>
				</view>

				<view class="bt">
					<button v-if="item.status == 2" @click="reminder() ">催单</button>
					<button v-if="item.status != 1" @click="repetition(item)">再来一单</button>
					<button type="warn" :plain="true" @click="rejection(item)" v-if="item.status == 2 || item.status == 5 ">退款</button>
					<button class="pay" @click="pay(item)" type="primary" :plain="true" v-if="item.status == 1 " style="color: #3CB7FF; border: solid 2rpx #3CB7FF;">支付</button>
					
				</view>
			</view>
		</scroll-view>
		
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose"  mode="input" title="退款理由" :value="rejectionReason"
				placeholder="请输入内容" @confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
import {historyOrders,reminder,rejection,repetition} from '@/api/order.js'
export default {
		data() {
			return {
                list: ['全部订单', '待付款', '已取消'],
				curNow: 0,
				rejectionReason:'',
				config: {
					page:1,
					pageSize:5,
					status:'',
					storeId:this.$store.state.storeId
				},
				rejectionConfig:{},
				total:5,
				orders:[
					{
						id:'',
						orderTime:'2024-5-11 15:46:09',
						status:0,
						orderDetailList:[
							{
								image:'https://web-kotori.oss-cn-beijing.aliyuncs.com/dbf76c48-964a-4ddb-a58b-389eb81a1378.jpg',
								name:'日复一日'
							},
							{
								image:'https://web-kotori.oss-cn-beijing.aliyuncs.com/dbf76c48-964a-4ddb-a58b-389eb81a1378.jpg',
								name:'日复一日'
							},
							{
								image:'https://web-kotori.oss-cn-beijing.aliyuncs.com/dbf76c48-964a-4ddb-a58b-389eb81a1378.jpg',
								name:'日复一日'
							},
							{
								image:'https://web-kotori.oss-cn-beijing.aliyuncs.com/dbf76c48-964a-4ddb-a58b-389eb81a1378.jpg',
								name:'日复一日'
							},
						],
						amount:72
					},
					{
						id:'',
						orderTime:'2024-5-11 15:46:09',
						status:0,
						orderDetailList:[
							{
								image:'https://web-kotori.oss-cn-beijing.aliyuncs.com/dbf76c48-964a-4ddb-a58b-389eb81a1378.jpg',
								name:'日复一日'
							}
						],
						amount:72
					},
					{
						id:'',
						orderTime:'2024-5-11 15:46:09',
						status:0,
						orderDetailList:[
							{
								image:'https://web-kotori.oss-cn-beijing.aliyuncs.com/dbf76c48-964a-4ddb-a58b-389eb81a1378.jpg',
								name:'日复一日'
							}
						],
						amount:72
					},
					{
						id:'',
						orderTime:'2024-5-11 15:46:09',
						status:0,
						orderDetailList:[
							{
								image:'https://web-kotori.oss-cn-beijing.aliyuncs.com/dbf76c48-964a-4ddb-a58b-389eb81a1378.jpg',
								name:'日复一日'
							}
						],
						amount:72
					},
				]
			}
		},
		onReady(){
			this.inti()
		},
		onShow(){
			this.inti()
		},
		methods: {
			inti(){
				this.orders = []
				historyOrders(this.config).then(res=>{
					this.orders = res.data.records
					this.total = res.data.total
					console.log(this.orders)
				}).catch(err=>{
					uni.showToast({
						title:err
					})
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			sectionChange(index) {
				console.log(index)
				this.curNow = index;
				if(index == 0){
					this.config.status = ''
					this.config.page = 1
				}
				if(index == 1){
					this.config.status = 1
					this.config.page = 1
				}
				if(index == 2){
					this.config.status = 6
					this.config.page = 1
				}
				this.inti()

			},
			pay(e){
				const orderVO = {
					orderNumber:e.number,
					orderAmount:e.amount + 6,
					orderTime:e.orderTime,
				}
				uni.navigateTo({
					url:"/pages/pay/pay?orderVO=" + encodeURIComponent(JSON.stringify(orderVO))
				})
			},
			gotoOrderInfo(e){
				console.log(e)
				uni.navigateTo({
					url:"/pages/orderInfo/orderInfo?order=" + encodeURIComponent(JSON.stringify(e))
				})

			},
			reminder(){
				// reminder()
				uni.showToast({
					title:'催单成功！',
					icon:'success'
				})
			},
			rejection(item){
				this.rejectionConfig = {
					id : item.id,
					rejectionReason : ''
				}
				this.$refs.inputDialog.open()

			},
			dialogInputConfirm(val) {
				this.rejectionConfig.rejectionReason = val
				console.log(this.rejectionConfig)
				rejection(this.rejectionConfig).then(res=>{
					
					this.$refs.inputDialog.close()
					uni.showToast({
						title:'退款成功！'
					})
					this.inti()
				}).catch(err=>{
					uni.showToast({
						title:err
					})
				})
				
			},
			repetition(item){
				// console.log(item)
				repetition(item.id).then(res=>{
					uni.navigateTo({
						url:'/pages/home/home'
					})
				}).catch(err=>{
					uni.showToast({
						title:err
					})
				})
			}
		},
		onReachBottom(){ //触底事件
			if (this.config.page * this.config.pageSize >= this.total) {
					uni.showToast({
						title: '没有更多数据了',
						icon: 'none',
						duration: 1000
					});
					setTimeout(() => {
						uni.hideLoading()
					}, 500)
				} else {
					if (this.config.page <= this.config.page - 1) {
						setTimeout(() => {
							uni.hideLoading()
						}, 500)
					} else {
						uni.showLoading({
							title: '加载中'
						});
						this.config.page++
						
						historyOrders(this.config).then(res=>{
							this.orders = this.orders.concat(res.data.records)
						}).catch(err=>{
							uni.showToast({
								title:err
							})
						})
					}
					setTimeout(() => {
						uni.hideLoading()
					}, 500)
				}
		}
	}
</script>

<style scoped>
.order{
	width: 95%;
	margin-left: 25rpx;
	background: #fff;
	margin-top: 26rpx;
	border-radius: 10rpx;
	/* height: 410rpx; */
}

.top{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 24rpx;
	font-size: 28rpx;
}

.mid{
	font-size: 26rpx;
	color: #666;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin: 24rpx;
	margin-top: 0rpx;
}

.products{
	display: flex;
	flex-direction: row;
	white-space: nowrap;
	width: 80%;
}

.price{
	/* height: 180rpx; */
	margin-right: 15rpx;
	margin-top: 20rpx;
	display: flex;
	flex-direction: column;

}

.product{
	width: 150rpx;
	display: inline-block;
	margin-right: 25rpx;

}

.bt{
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	/* justify-content: flex-end; */
}

button{
	width: 180rpx;
	font-size: 26rpx;
	/* margin-left: 12rpx; */
	/* margin: 0; */
	margin-top: 19rpx;
	margin-right: 25rpx;
	background-color: #fff;
}
.pay:active, .pay:hover{	
	opacity: 0.7;
}
</style>
